<template>
  <div class="tabs">
    <Header title="关注"></Header>
    <div class="tabs__titles">
      <div class="tabs__title" v-for="item in tabs" :class="active == item.id ? 'tabs__title--current': ''" @click="handleTabs(item.id)">
        <span class="tabs__title-inner">{{item.name}}</span>
      </div>
    </div>
    <form class="search-form" v-show="active == 1" @submit.prevent action="#">
      <div class="search-form__main">
        <input type="search" class="search-form__input" v-model="keyword" placeholder="请输入关键字" @keypress="handleSearch">
        <button type="button" class="search-form__search" @click="handleBtnSearch">搜索</button>
      </div>
      <button type="button" class="search-form__cancel" @click="handleSearchCancel">取消</button>
    </form>
    <div class="page__main">
      <div class="page__scroller">
        <div class="list" v-show="active == 1">
          <div class="loading-wrap" v-show="recommendListLoading">
            <van-loading size="24px" vertical>数据加载中...</van-loading>
          </div>
          <div class="list__item" v-for="item in recommendList" @click="handleRouter(item.INDICATORS_NAME)">
            <div class="list__title">
              <span class="text--red">{{numFormat(item.RATE)}}{{unitFormat(item.INDICATORS_NAME)}}</span>
              <span>{{item.INDICATORS_NAME}}</span>
            </div>
            <div class="list__info" v-show="item.DESCRIBE != null && item.DESCRIBE != 'null'">
              <span class="list__info-inner">{{item.DESCRIBE}}</span>
            </div>
            <div class="list__intro" v-show="item.FORMNULA != null && item.FORMNULA != 'null'">{{item.FORMNULA}}</div>
            <button
              class="list__action"
              :class="item.STATE == 0 ? 'list__action--concern': ''"
              type="button"
              @click.stop="handleConcernAction(item)">
              {{item.STATE == 0 ? '已关注': '关注'}}
            </button>
          </div>
        </div>
        <div class="list" v-show="active == 2">
          <div class="loading-wrap" v-show="concernListLoading">
            <van-loading size="24px" vertical>数据加载中...</van-loading>
          </div>
          <div class="list__item" v-for="item in concernList" @click="handleRouter(item.INDICATORS_NAME)">
            <div class="list__title">
              <span class="text--red">{{item.INDICATORS_VALUE}}%</span>
              <span>{{item.INDICATORS_NAME}}</span>
            </div>
            <div class="list__info" v-show="item.DESCRIBE != 'null' && item.DESCRIBE != null">
              <span class="list__info-inner">{{item.DESCRIBE}}</span>
            </div>
            <div class="list__intro" v-show="item.FORMNULA != 'null' && item.FORMNULA != null">{{item.FORMNULA}}</div>
            <button
              class="list__action"
              :class="item.STATE == 0 ? 'list__action--concern': ''"
              type="button"
              @click.stop="handleConcernAction(item)">
              {{item.STATE == 0 ? '已关注': '关注'}}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Header from "@/components/Header";
  export default {
    components: {
      Header
    },
    data() {
      return {
        userInfo: this.$store.state.userInfo,
        areaType: '',
        qryAreaLevel: '',
        tabs: [
          {name: '推荐', id: '1',},
          {name: '我的关注', id: '2'},
        ],
        active: '1',
        keyword: '',
        recommendListLoading: false,
        concernListLoading: false,
        recommendList: [],
        concernList: [],
      }
    },
    methods: {
      //tab切换
      handleTabs(id) {
        if (this.active != id) {
          this.active = id
        }
      },
      //获得推荐列表
      getRecommendList() {
        let params = {
          areaType: this.areaType,
          keyword: this.keyword,
          qryAreaLevel: this.qryAreaLevel,
          userId: this.userInfo.user_id,
          areaId: this.userInfo.home_city,
        }
        this.recommendList = []
        this.recommendListLoading = true
        this.$http.post('/api/focuson/recommenFocuson', params).then(data => {
          let result = data.list
          this.recommendList = result
          this.recommendListLoading = false
        })
      },
      //获得关注列表
      getConcernList() {
        let params = {
          userId: this.userInfo.user_id,
        }
        this.concernList = []
        this.concernListLoading = true
        this.$http.post('/api/focuson/selectFocuson', params).then(data => {
          let result = data.revenue
          this.concernList = result
          this.concernList.forEach(item => {
            Object.assign(item, {'STATE': '0'})
          })
          this.concernListLoading = false
        })
      },
      //添加及取消关注
      handleConcernAction(item) {
        if (item.STATE == 0) {
          let params = {
            userId: this.userInfo.user_id,
            indicatoerId: item.INDICATORS_ID
          }
          this.$http.post('/api/focuson/deleteFocuson', params).then(data => {
            if (data.success == true) {
              this.$dialog.alert({
                title: '温馨提示',
                message: '取消关注成功'
              })
              this.getRecommendList()
              this.getConcernList()
            } else {
              this.$dialog.alert({
                title: '温馨提示',
                message: '取消关注失败'
              })
            }
          })
        } else if (item.STATE == 1) {
          let params = {
            userId: this.userInfo.user_id,
            indicatoerId: item.INDICATORS_ID,
            indicatoerName: item.INDICATORS_NAME,
            indicatoerValue: item.RATE,
            formnula: item.FORMNULA,
            describe: item.DESCRIBE,
          }
          this.$http.post('/api/focuson/saveFocusonInfo', params).then(data => {
            if (data.success == true) {
              this.$dialog.alert({
                title: '温馨提示',
                message: '添加关注成功'
              })
              this.getRecommendList()
              this.getConcernList()
            } else {
              this.$dialog.alert({
                title: '温馨提示',
                message: '添加关注失败'
              })
            }
          })
        }
      },
      //键盘搜索
      handleSearch(event) {
        if (event.keyCode == 13) {
          if (this.keyword.trim() == '') {
            this.$dialog.alert({
              title: '温馨提示',
              message: '搜索内容不能为空'
            })
          } else {
            this.getRecommendList()
          }
        }
      },
      //按钮搜索
      handleBtnSearch() {
        if (this.keyword.trim() == '') {
          this.$dialog.alert({
            title: '温馨提示',
            message: '搜索内容不能为空'
          })
        } else {
          this.getRecommendList()
        }
      },
      //取消搜索
      handleSearchCancel() {
        this.keyword = ''
        this.getRecommendList()
      },
      //获得地市信息
      getAreaInfo() {
        let role = sessionStorage.getItem('role')
        switch (role) {
          case 'all':
            this.areaType = '1'
            this.qryAreaLevel = '0'
            break;
          case 'province':
            this.areaType = '2'
            this.qryAreaLevel = '3'
            break;
          case 'city':
            this.areaType = '3'
            this.qryAreaLevel = '4'
            break;
          default:
            break;
        }
      },
      //页面跳转
      handleRouter(name) {
        switch (name) {
          case '室分长期未起租项目解决率':
            this.$router.push({name: 'NonDelivery'})
            break;
          case '室分交付未起租或部分起租解决率':
            this.$router.push({name: 'NonRent'})
            break;
          case '宏站新建站址交付及时率':
            this.$router.push({name: 'SiteLocation'})
            break;
          case '宏站长期未交付订单解决率':
            this.$router.push({name: 'NonDeliveryTower'})
            break;
          case '塔类项目关闭及时率':
            this.$router.push({name: 'CloseTimelyRate', query:{key: 'towerClose'}})
            break;
          case '室分项目关闭及时率':
            this.$router.push({name: 'CloseTimelyRate', query:{key: 'roomClose'}})
            break;
          case '高铁地铁项目关闭及时率':
            this.$router.push({name: 'CloseTimelyRate', query:{key: 'trainClose'}})
            break;
          case '宏站本年新建地面塔项目数':
            this.$router.push({name: 'NewTower'})
            break;
          case '运营商平均每站址租户数':
            this.$router.push({name: 'OperatorTenant'})
            break;
          case '营收款欠款占收比':
            this.$router.push({name: 'AssessTarget', query:{id: '1007'}})
            break;
          case '营业收入增长率':
            this.$router.push({name: 'AssessTarget', query:{id: '1064'}})
            break;
          case 'EBITDA率':
            this.$router.push({name: 'AssessTarget', query:{id: '1067'}})
            break;
          case '代垫电费欠款比率':
            this.$router.push({name: 'AssessTarget', query:{id: '1068'}})
            break;
          case '资产报酬率':
            this.$router.push({name: 'AssessTarget', query:{id: '1081'}})
            break;
          case '利润贡献率':
            this.$router.push({name: 'AssessTarget', query:{id: '1094'}})
            break;
        }
      },
      //数字初始化
      numFormat(num) {
        return (num+ '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,')
      },
      //获得单位
      unitFormat(name) {
        if(name == '宏站本年新建地面塔项目数') {
          return '个'
        } else if (name == '运营商平均每站址租户数') {
          return '户/站'
        } else {
          return '%'
        }
      },
      //页面初始化
      pageInit() {
        this.getAreaInfo()
        this.getRecommendList()
        this.getConcernList()
      }
    },
    created() {
      this.pageInit()
    },
    beforeRouteEnter(to, from, next) {
      let alive = from.name == 'Home'
      next(vm => {
        if (alive) {
          vm.active = '1',
          vm.keyword = '',
          vm.pageInit()
        }
      });
    },
  }
</script>

<style lang="scss" scoped>
  .tabs {
    &__titles {
      display: flex;
      border-bottom: 1px solid #F2F2F2;
      background: #fff;
      box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
      z-index: 1;
    }
    
    &__title {
      flex: 1;
      line-height: 36px;
      font-size: 16px;
      text-align: center;
      
      &-inner {
        display: inline-block;
        border-bottom: 3px solid transparent;
        color: #6D6D6D;
        padding: 0 10px;
      }
  
      &--current {
    
        .tabs__title-inner {
          color: #D70D17;
          border-color: #D70D17;
        }
      }
    }
  }
  
  .search-form {
    background: #fff;
    padding: 6px 50px 6px 12px;
    position: relative;
    box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
    z-index: 1;
    font-size: 12px;
    
    &__search,
    &__cancel {
      border: 0;
      outline: none;
      background: transparent;
      position: absolute;
      height: 26px;
      line-height: 26px;
      top: 50%;
      margin-top: -13px;
      padding: 0;
      right: 0;
    }
  
    &__cancel {
      color: #8D8D8D;
      width: 50px;
    }
  
    &__search {
      width: 45px;
    }
    
    &__main {
      background: #F2F2F2;
      border-radius: 16px;
      overflow: hidden;
      position: relative;
      padding: 0 44px 0 32px;
      
      &::before {
        content: "";
        position: absolute;
        width: 26px;
        height: 26px;
        left: 0;
        top: 0;
        background: url(~@/assets/images/icon-search.png) center center no-repeat;
        background-size: 50% 50%;
      }
    }
    
    &__input {
      display: block;
      background: transparent;
      border: 0;
      outline: none;
      width: 100%;
      padding: 6px 0;
    }
  }
  
  .list {
    padding: 8px;
    
    &__item {
      margin-bottom: 8px;
      background: #fff;
      border-radius: 8px;
      position: relative;
      padding: 8px 12px;
    }
    
    &__title {
      font-size: 14px;
      margin-bottom: 6px;
    }
    
    &__intro {
      color: #9F9D9D;
      white-space: pre-line;
      font-size: 12px;
    }
    
    &__info {
      margin-bottom: 5px;
      
      &-inner {
        display: inline-block;
        background: #f5f5f5;
        border-radius: 2px;
        font-size: 12px;
        border: 1px dashed #E6E6E6;
        color: #797777;
        padding: 6px;
      }
    }
    
    &__action {
      position: absolute;
      border: 1px solid;
      color: #F5A623;
      right: 8px;
      top: 8px;
      background: transparent;
      outline: none;
      border-radius: 2px;
      padding: 2px 4px 2px 16px;
      overflow: hidden;
      
      &::before {
        content: "+";
        position: absolute;
        left: 5px;
        top: -1px;
        font-size: 16px;
        line-height: 1;
      }
      
      &--concern {
        color: #6F6F6F;
        
        &::before {
          content: "";
          position: absolute;
          width: 4px;
          height: 8px;
          border-right: 1px solid;
          border-bottom: 1px solid;
          transform: translateY(-60%) rotate(45deg);
          left: 5px;
          top: 50%;
        }
      }
    }
  }
  .loading-wrap {
    padding-top: 80px;
  }
</style>
